<template>
  <div>
    <el-container>
      <el-header>
        <div
          style="
            width: 100%;
            border-bottom: 1px solid black;
            margin-top: -20px;
            line-height: 70px;
          "
        >
          <span style="font-size: 18px; font-weight: bold">类型</span>
          <el-button style="float: right; line-height: 40px; width: 110px"
            >添加类型</el-button
          >
        </div>
      </el-header>
      <el-main>
        <el-table :data="typelist" border style="width: 100%">
          <el-table-column prop="id" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="type" label="书本类型" width="200">
          </el-table-column>
          <el-table-column label="功能">
            <!-- <el-button type="primary" >修改</el-button> -->
            <template #default="scope">
              <el-button type="primary" @click="typedit(typelist[scope.$index])"
                >修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <el-dialog v-model="dialogTableVisible">
      {{ bianliang }}
      <span style="position: absolute; top: 6%; left: 2%; font-size: 18px"
        >类型信息</span
      >
      <div>
        <el-form>
          <div style="display: flex; line-height: 50px; margin-top: 5px">
            <label style="width: 10%">ID</label>
            <div style="width: 92%">
              <el-input
                type="number"
                autocomplete="off"
                v-model.lazy.trim="typeid"
              ></el-input>
            </div>
          </div>
          <div style="display: flex; line-height: 50px; margin-top: 5px">
            <label style="width: 10%">类型</label>
            <div style="width: 92%">
              <el-input
                type="next"
                autocomplete="off"
                v-model.lazy.trim="types"
              ></el-input>
            </div>
          </div>
          <el-button @click="postData()" style="margin-top: 20px"
            >修改</el-button
          >
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<!-- <el-form-item label="ID" >
	      <el-input
	        type="password"
	        autocomplete="off"
	      ></el-input>
	    </el-form-item>
	    <el-form-item label="Confirm">
	      <el-input
	        type="password"
	        autocomplete="off"
	      ></el-input>
	    </el-form-item>
	    <el-form-item>
	      <el-button type="primary" @click="submitForm('ruleForm')"
	        >Submit</el-button>
	 </el-form-item> -->
<!-- 	右侧
	<div class="type_right">
		<p>{{title}}</p>
		<p>
			类型ID：
			将id输入框设置为；只读
			<input type="number" readonly v-model.lazy.trim="typeid" />
		</p>
		<p>
			类型名称：
			<input type="text" v-model.lazy.trim="types" />
		</p>
		<p><button @click="postData()">{{title}} 提交</button></p>
	</div> -->

<script>
// import { defineComponent, reactive, toRefs } from "vue";

export default {
  name: "Type",
  data() {
    return {
      typelist: [], //请求接受的数据
      title: "浏览中", //状态
      typeid: "", //类型id
      types: "", //类型名称
      bianliang: {},
      dialogTableVisible: false,
    };
  },
  methods: {
    // 点击切换修改类型 x参数表示当前被点击的数组下标
    typedit(x) {
      // this.title = '修改类型';
      // // 直接从typelist数组内提出指定下标的数据
      // this.typeid = this.typelist[x].id;
      // this.types = this.typelist[x].type;
      this.bianliang = x;
      this.dialogTableVisible = true;
      console.log(this.bianliang);
      console.log(this.bianliang.id);
      this.typeid = this.bianliang.id;
      this.types = this.bianliang.type;
    },
    // 点击切换添加界面
    typeadd() {
      this.title = "添加类型";
      this.typeid = 0;
    },
    // 点击向后台的数据库提交输入框的数据【post请求】
    postData() {
      // 备份
      let that = this;
      // 判断名称不为空
      if (this.types != "" && this.typeid !== "") {
        // 发起post请求	请求地址 + 提交数据 + 表头配置
        /*
					请求地址：/api/adm/type/add
					提交的数据：this.$qs.stringify( data )
					配置：header对象
				*/
        // 将提交的数据打包
        let data = {
          id: this.typeid,
          type: this.types,
          pid: this.bianliang.pid,
          prio: this.bianliang.prio,
          isdel: this.bianliang.isdel,
        };
        this.axios
          .post("/api/adm/type/add", this.$qs.stringify(data), {
            // 告知服务器本次请求的方式以及编码格式
            headers: {
              "Content-Type":
                "application/x-www-form-urlencoded ; charset=UTF-8",
            },
          })
          .then((res) => {
            if (res.status === 200) {
              // 将新获取的数据重新赋值给typelist
              that.typelist = res.data.data;
              // 清空输入框
              this.typeid = "";
              this.types = "";
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
      this.dialogTableVisible = false;
    },
  },
  // 组件创建之后
  created() {
    // 发起get请求，获取数据
    this.axios
      .get("/api/adm/type/findAll")
      .then((res) => {
        // 判断状态
        console.log(res);
        if (res.status === 200) {
          // 向表格渲染数据
          this.typelist = res.data.data;
          console.log(this.typelist);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  },
};
</script>

<style>
.type_header {
  border: 1px solid black;
  line-height: 80px;
}
.type_header span {
  font-size: 25px;
  font-weight: bold;
}
.type_header button {
  float: right;
  height: 35px;
  width: 65px;
  margin-top: 20px;
  font-size: 23px;
  color: #0000ee;
}
.type_bottom {
  display: flex;
}
.type_left {
  width: 50%;
}
.type_left table tr td {
  border: 1px solid black;
}
.type_left table tr td:nth-child(1) {
  width: 50px;
}
.type_left table tr td:nth-child(2) {
  width: 300px;
}
.type_left table tr td:nth-child(3) {
  width: 100px;
}
</style>
